<template>
    <div>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5,10,15,20]"
            background layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>
<script setup>
    import { toRefs, defineProps, defineEmits } from 'vue'
    const props = defineProps({
        total: {
            required: true,
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 5,
        },
        currentPage: {
            type: Number,
            default: 1,
        },


    })
    const { total, pageSize, currentPage } = toRefs(props)
    const emit = defineEmits(["paginationSize", "paginationNowpage"]);
    const handleSizeChange = (Size) => {
        console.log(Size)
        emit('paginationSize',
            {
                pageSize: Size
            })
    }
    const handleCurrentChange = (nowpage) => {
        console.log(nowpage)
        emit('paginationNowpage',
            {
                currentPage: nowpage
            })

    }
    console.log("props", props)



</script>
<style lang="less" scoped>

</style>